<template>
  <div class="ruku-development">
    <div class="test">
      <el-button @click="testInput" type="primary">模拟入库</el-button>
      <el-button @click="changeStyle" type="success">改变样式</el-button>
      <el-button @click="reload" type="danger">重置</el-button>
    </div>
    <div class="ruku" v-if="testStyle">
      <div class="top"></div>
      <div class="info">
        <div class="info-l">
          <div>
            <div>商品名称</div>
            <div>{{ productName }}</div>
          </div>
          <div>
            <div>总数量（头）</div>
            <div>{{ totalNum }}</div>
          </div>
          <div>
            <div>已入库（头）</div>
            <div>{{ storedList.length }}</div>
          </div>
          <div>
            <div>剩余（头）</div>
            <div>{{ remainingNum }}</div>
          </div>
          <div>
            <div>已处理公斤数</div>
            <div>{{ totalWeight }}</div>
          </div>
        </div>
        <div class="info-r">
          <div>电子秤</div>
          <div>RFID</div>
        </div>
      </div>
      <div class="weight">
        <div>
          <div style="text-align: center;">挂钩编号</div>
          <div>
            <div>
              <bignum2 v-for="(x, y) in trackCode" :key="y" :num="x" />
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div>
          <div style="text-align: center;">重量（kg）</div>
          <div>
            <div>
              <bignum2 v-for="(x, y) in weight.split('.')[0]" :key="y" :num="x" />
              <div class="point"></div>
              <bignum2 :num="weight.split('.')[1]" />
            </div>
            <div class="kg">
              kg
            </div>
          </div>
        </div>
      </div>
      <div class="order">
        <div>
          <div>批次：PICI20250731</div>
          <div> </div>
        </div>
        <div>
          <div>车牌：</div>
          <div :class="chepai.length == 7 ? 'chepai1' : 'chepai2'">
            {{ chepai }}
          </div>
        </div>
        <div>
          <div>屠宰场：牧原屠宰场</div>
          <div></div>
        </div>
      </div>
      <div class="stored-list">
        <div v-for="(x, y) in storedList" :key="y">
          <div>
            <div>{{ y + 1 }}</div>
            <div>{{ x.code }}</div>
            <div>{{ x.weight }}</div>
            <div @click="delProduct(y)"> - </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="ruku2">
      <div class="top">
        <div>设备编号</div>
        <div>{{ date + ' ' + time }}</div>
      </div>
      <div class="weight">
        <div>
          <bignum2 v-for="(x, y) in showWeight.split('.')[0]" :key="y" :num="x" />
          <div class="point"></div>
          <bignum2 :num="showWeight.split('.')[1]" />
        </div>
      </div>
      <div class="info">
        <div>
          <div>挂钩编号</div>
          <div>{{ trackCode }}</div>
        </div>
        <div>
          <div>理货重量</div>
          <div>{{ totalWeight }} Kg</div>
        </div>
        <div>
          <div>理货片数</div>
          <div>{{ storedList.length + ' / ' + totalNum }}</div>
        </div>
      </div>
      <div class="product">
        <div>商户名称：</div>
        <div>商户电话：</div>
        <div>报备商品：{{ productName }}</div>
        <div>报备单号：{{ orderCode }}</div>
      </div>
      <div class="btn">
        <div>正常</div>
        <div><el-button>完成入库</el-button>
        </div>
        <div><el-button>暂停入库</el-button>
          <el-button @click="showList">理货记录</el-button>
        </div>
      </div>
      <el-dialog title="商品列表" v-model="isList" width="800px">
        <div class="product-list">
          <div v-for="(x, y) in storedList" :key="y">
            <div>
              <div>{{ x.code }}</div>
              <div>{{ x.weight }}</div>
              <div @click="delProduct(y)"> - </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue'
import bignum2 from '@/components/bignum2.vue'
import global from '@/utils/global'
import element  from '@/utils/element'
const totalNum = 30
const storedList = ref([])
const testStyle = ref(true)
const isList = ref(false)
const weight = ref('0.0')
const trackCode = ref('1000')
const productName = ref('热鲜白条')
const orderCode = ''
let timer = ''
const time = ref('')
const date = ref('')
const chepai = ref('粤BFC5574')
const showWeight = ref('  0.0')
const remainingNum = computed(() => {
  return totalNum - storedList.value.length
})
const totalWeight = computed(() => {
  return storedList.value.reduce((acc, obj) => add(acc, obj.weight), 0);
})

function createTime() {
  const date = new Date();
  const h = zero(date.getHours());
  const m = zero(date.getMinutes());
  const s = zero(date.getSeconds());
  time.value = `${h} : ${m} : ${s}`;
}

function zero(num) {
  return num < 10 ? "0" + num : num
}

function add(a, b) {
  const factor = 10 ** 10; // 根据需要调整因子
  return (a * factor + b * factor) / factor;
}

function showList() {
  isList.value = true
}

function testInput() {
  if (storedList.value.length == totalNum) {
    // console.log(storedList.value)
    element.success('入库完毕')
    return
  }
  trackCode.value = (Number(trackCode.value) + 1).toString()
  weight.value = (110 + Math.random() * 10).toFixed(1)
  showWeight.value = ' ' + weight.value
  storedList.value.push({
    code: trackCode.value,
    weight: weight.value,
    product: productName.value
  })
}

function delProduct(index) {
  storedList.value.splice(index, 1)
}

function reload() {
  storedList.value = []
  trackCode.value = '1000'
  weight.value = '0.0'
  showWeight.value = '  0.0'
}

function changeStyle() {
  testStyle.value = !testStyle.value
}

onMounted(() => {
  // document.title = '模拟称重'
  date.value = global.setDate(new Date())
  timer = setInterval(() => {
    createTime()
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
})

</script>
<style scoped lang="scss">
.ruku {
  padding: 10px;

  .info {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .info-l {
      width: calc(100% - 200px);
      display: flex;
      justify-content: space-around;

      >div {
        margin-right: 10px;
        text-align: center;
        border: 1px solid #fff;
        padding: 10px 20px;

        >div:last-child {
          font-size: 36px;
          font-weight: 700;
        }
      }
    }

    .info-r {
      width: 200px;
      display: flex;

      >div {
        width: 60px;
        height: 60px;
        background-color: #1889fa;
        color: #fff;
        border-radius: 50%;
        margin: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  .weight {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    border: 10px solid #fff;
    border-radius: 20px;
    padding: 50px 0;
    margin: 20px auto;
    overflow: auto;

    >div {
      // width: 50%;
      font-size: 24px;

      >div:last-child {
        font-size: 54px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        margin-top: 20px;

        >div {
          display: flex;

          >div {
            margin-right: 10px;
          }

          .point {
            width: 10px;
            height: 10px;
            background-color: #a3fe19;
            margin-right: 10px;
            margin: 240px 20px 0 20px;
          }
        }

        >div:last-child {
          display: flex;
          align-items: end;
        }
      }
    }

    .line {
      width: 2px;
      height: 300px;
      background-color: #fff;
    }
  }

  .order {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;

    >div {
      display: flex;
      align-items: center;

      .chepai1 {
        background-color: #1889fa;
        color: #fff;
        padding: 5px 10px;
      }

      .chepai2 {
        background-color: #73fe70;
        color: #000;
        padding: 5px 10px;
      }
    }
  }

  .stored-list {
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 20%;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;

      >div {
        display: flex;

        >div {
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #000;
          color: #fff;
        }

        >div:nth-child(2) {
          width: 70px;
        }

        >div:nth-child(3) {
          width: 70px;
        }

        >div:last-child {
          background-color: gray;
          font-weight: 700;
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
  }
}

.ruku2 {
  >div {
    margin-top: 20px;
  }

  .top {
    display: flex;
    justify-content: space-between;

    >div {
      padding: 0 20px;
    }
  }

  .weight {
    width: 90%;
    display: flex;
    justify-content: space-around;
    border: 10px solid #fff;
    border-radius: 20px;
    padding: 50px 0;
    margin: 20px auto;

    >div {
      // width: 50%;
      // text-align: center;
      font-size: 24px;
      display: flex;

      .bignum2 {
        margin-right: 20px;
      }

      >div {
        margin-right: 20px;
      }

      .point {
        width: 10px;
        height: 10px;
        background-color: #a3fe19;
        margin-right: 10px;
        margin: 240px 20px 0 20px;
      }
    }
  }

  .info {
    display: flex;
    justify-content: space-around;

    >div {
      display: flex;

      >div {
        line-height: 48px;
        font-size: 24px;
      }

      >div:last-child {
        color: aquamarine;
        font-size: 52px;
        margin-left: 20px;
        font-weight: 700;
      }
    }
  }

  .product {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto 0;

    >div {
      width: 50%;
    }
  }

  .btn {
    display: flex;
    justify-content: space-around;
  }
}

.test {
  margin: 10px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 500px;
  overflow: auto;

  >div {
    width: calc(33% - 20px);
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    height: 50px;

    >div {
      display: flex;
      background-color: #000;
      color: #fff;

      >div {
        line-height: 30px;
        padding: 10px 20px;
      }

      >div:last-child {
        background-color: gray;
        font-weight: 700;
        font-size: 24px;
        cursor: pointer;
      }
    }
  }
}
</style>
